<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Yb">
    <title>历史记录翻页效果</title>
    <style>
        #outer{
            width: 650px;
            margin: 30px auto;
        }
    </style>
</head>
<body>
    <div id="outer">
        <button type="button" onclick="lastPage()">上一页</button>
        <img src="img/1.jpg" alt="">
        <button type="button" onclick="nextPage()">下一页</button>
    </div>
</body>
</html>

<script>
    var Img = document.querySelector('img');

    var num = function(){
        var a = Img.src.substr(Img.src.lastIndexOf('img/'));
        a = a.substr(4,1) * 1;
    }

    var a = 1;
    function lastPage(){
        if(a>1){
            a --;
            num();
            Img.src = 'img/' + a + '.jpg';
        }else{
            alert('已经是第一页了');
        }
    }
    
    function nextPage(){
        if(a<5){
            a ++;
            num();
            Img.src = 'img/' + a + '.jpg';
        }else{
            alert('已经是最后一页了');
        }
    }
</script>